<template>
  <div class="supplier_view footer-page">
    <el-form
      :model="viewForm"
      :rules="rules"
      ref="viewForm"
      class="demo-ruleForm"
      :class="{'edit_form':isEdit}"
    >
      <p class="edit-header">
        <span>店铺信息</span>
      </p>
      <div class="info_list">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>店铺头像:</label>
              <div class="flex-1">
                <preview-img
                  v-if="!isEdit"
                  :img-url="viewForm.photo"
                ></preview-img>
                <el-form-item
                  v-else
                  prop="photo"
                >
                  <crop-upload
                    show-type="photo"
                    :init-val="viewForm.photo"
                    wrapper-width="95px"
                    wrapper-height="95px"
                    @setVal="(val)=>setUrl('photo',val)"
                  ></crop-upload>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>店铺名称:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{viewForm.shopname}}</p>
                <el-form-item
                  v-else
                  prop="shopname"
                >
                  <el-input
                    clearable
                    :maxlength="30"
                    v-model="viewForm.shopname"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>经营项目:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{viewForm.category_name}}</p>
                <el-form-item
                  v-else
                  prop="category_name"
                >
                  <el-input
                    disabled
                    v-model="viewForm.category_name"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
<!--          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>账户类型:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{viewForm.account==1?'融资账户':'非融资账户'}}</p>
                <el-form-item
                  v-else
                  prop="account"
                >
                  <el-select
                    clearable
                    v-model="viewForm.account"
                    @change="accountTypeChange"
                  >
                    <el-option
                      label="融资账户"
                      :value="1"
                    ></el-option>
                    <el-option
                      label="非融资账户"
                      :value="2"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-col> -->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>是否风控:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{viewForm.account_type==1?'是':'否'}}</p>
                <el-form-item
                  v-else
                  prop="account_type"
                >
                  <el-select
                    clearable
                    :disabled="viewForm.account==1"
                    v-model="viewForm.account_type"
                  >
                    <el-option
                      label="是"
                      :value="1"
                    ></el-option>
                    <el-option
                      label="否"
                      :value="2"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>发票类型:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{viewForm.faptype==1?'普通发票':viewForm.faptype==2?'增值税发票':'普通发票+增值税发票'}}</p>
                <el-form-item
                  v-else
                  prop="faptype"
                >
                  <el-select
                    clearable
                    v-model="viewForm.faptype"
                  >
                    <el-option
                      label="普通发票"
                      value="1"
                    ></el-option>
                    <el-option
                      label="增值税发票"
                      value="2"
                    ></el-option>
                    <el-option
                      label="普通发票+增值税发票"
                      value="1,2"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>当前经营位置:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{shopcity}}</p>
                <el-form-item
                  v-else
                  prop="shopcity"
                >
                  <el-cascader
                    clearable
                    filterable
                    placeholder="请选择当前经营位置"
                    v-model="viewForm.shopcity"
                    :options="regionList"
                    :props="optionProps"
                    separator="-"
                  ></el-cascader>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>店铺联系人:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{viewForm.people}}</p>
                <el-form-item
                  v-else
                  prop="people"
                >
                  <el-input
                    clearable
                    v-model="viewForm.people"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>联系人手机号:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{viewForm.contact_tel}}</p>
                <el-form-item
                  v-else
                  prop="contact_tel"
                >
                  <el-input
                    clearable
                    v-model="viewForm.contact_tel"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div
              v-if="!isEdit"
              class="flex align-center"
            >
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>审核状态:</label>
              <div class="flex-1">
                <el-tag :type="viewForm.status == 1 ? 'success' : viewForm.status == 2 ? 'warning' : 'danger'">{{ viewForm.status == 1 ? "已审核" : viewForm.status == 2 ? "待审核" : "拒绝" }}</el-tag>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <p class="edit-header">
        <span>公司信息</span>
      </p>
      <div class="info_list">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>公司名称:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{viewForm.mechanism}}</p>
                <el-form-item
                  v-else
                  prop="mechanism"
                >
                  <el-input
                    clearable
                    :maxlength="10"
                    v-model="viewForm.mechanism"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>工商注册号:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{viewForm.companyid}}</p>
                <el-form-item
                  v-else
                  prop="companyid"
                >
                  <el-input
                    clearable
                    v-model="viewForm.companyid"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex area_item">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>公司所在区域:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{companyArea}}</p>
                <el-form-item
                  v-else
                  prop="company_area"
                >
                  <el-cascader
                    clearable
                    filterable
                    placeholder="请选择公司所在区域"
                    v-model="viewForm.company_area"
                    :options="areaList"
                    :props="optionProps"
                    separator="-"
                  ></el-cascader>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>公司地址:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{viewForm.company}}</p>
                <el-form-item
                  v-else
                  prop="company"
                >
                  <el-input
                    clearable
                    v-model="viewForm.company"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>法人姓名:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{viewForm.faname}}</p>
                <el-form-item
                  v-else
                  prop="faname"
                >
                  <el-input
                    clearable
                    :maxlength="10"
                    v-model="viewForm.faname"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>法人身份证号:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{viewForm.idcard}}</p>
                <el-form-item
                  v-else
                  prop="idcard"
                >
                  <el-input
                    clearable
                    v-model="viewForm.idcard"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>营业执照:</label>
              <div class="flex-1">
                <preview-img
                  v-if="!isEdit"
                  :img-url="viewForm.shopcard"
                ></preview-img>
                <el-form-item
                  v-else
                  prop="shopcard"
                >
                  <crop-upload
                    show-type="photo"
                    :init-val="viewForm.shopcard"
                    wrapper-width="95px"
                    wrapper-height="95px"
                    @setVal="(val)=>setUrl('shopcard',val)"
                  ></crop-upload>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>公司门头照:</label>
              <div class="flex-1">
                <preview-img
                  v-if="!isEdit"
                  :img-url="viewForm.doorphoto"
                ></preview-img>
                <el-form-item
                  v-else
                  prop="doorphoto"
                >
                  <crop-upload
                    show-type="photo"
                    :init-val="viewForm.doorphoto"
                    wrapper-width="95px"
                    wrapper-height="95px"
                    @setVal="(val)=>setUrl('doorphoto',val)"
                  ></crop-upload>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>公章图片:</label>
              <div class="flex-1">
                <preview-img
                  v-if="!isEdit"
                  :img-url="viewForm.seal_url"
                ></preview-img>
                <el-form-item
                  v-else
                  prop="seal_url"
                >
                  <crop-upload
                    show-type="photo"
                    :init-val="viewForm.seal_url"
                    wrapper-width="95px"
                    wrapper-height="95px"
                    @setVal="(val)=>setUrl('seal_url',val)"
                  ></crop-upload>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>身份证正面照:</label>
              <div class="flex-1">
                <preview-img
                  v-if="!isEdit"
                  :img-url="viewForm.faidcard"
                ></preview-img>
                <el-form-item
                  v-else
                  prop="faidcard"
                >
                  <crop-upload
                    show-type="photo"
                    :init-val="viewForm.faidcard"
                    wrapper-width="95px"
                    wrapper-height="95px"
                    @setVal="(val)=>setUrl('faidcard',val)"
                  ></crop-upload>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>身份证背面照:</label>
              <div class="flex-1">
                <preview-img
                  v-if="!isEdit"
                  :img-url="viewForm.faidcard_back"
                ></preview-img>
                <el-form-item
                  v-else
                  prop="faidcard_back"
                >
                  <crop-upload
                    show-type="photo"
                    :init-val="viewForm.faidcard_back"
                    wrapper-width="95px"
                    wrapper-height="95px"
                    @setVal="(val)=>setUrl('faidcard_back',val)"
                  ></crop-upload>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
      </div>
      <template v-if="!isEdit">
        <p class="edit-header">
          <span>操作记录</span>
        </p>
        <div class="info_list">
          <el-table :data="tableData">
            <el-table-column
              prop="operation_content"
              label="内容"
            />
            <el-table-column
              prop="operator"
              label="操作人"
              width="180"
            />
            <el-table-column
              prop="operation_time"
              label="操作时间"
              width="200"
            />
          </el-table>
        </div>
      </template>
    </el-form>
    <div
      v-if="$hasMethod('#edit')"
      class="page-footer-btns"
    >
      <template v-if="!isEdit">
        <el-button
          size="small"
          @click="$router.back()"
        >返回</el-button>
        <el-button
          v-if="viewForm.status==2"
          size="small"
          type="primary"
          @click="$router.push({ name: 'auditSupplierView', params: { viewId: viewId, toEdit: true } })"
        >修改信息</el-button>
      </template>
      <template v-else>
        <el-button
          size="small"
          @click="cancelEdit"
        >返回</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submit"
        >保存</el-button>
      </template>
    </div>
  </div>
</template>

<script>
import previewImg from "@/components/previewImg";
import { shopUserById, editShopUserById } from "@/api/audit";
import cropUpload from "@/components/cropUpload";
import { checkCompanyId, checkCardId, checkMobile } from '@/utils/validate';
import { getRegion } from "@/api/order";
export default {
  components: { previewImg, cropUpload },
  props: ["viewId", "toEdit"],
  data() {
    let validateTel = (rule, value, callback) => {
      if (!checkMobile(value)) {
        callback(new Error('联系人手机号格式错误'));
      } else {
        callback();
      }
    }
    let validateCompanyId = (rule, value, callback) => {
      if (!checkCompanyId(value)) {
        callback(new Error('工商注册号格式错误'));
      } else {
        callback();
      }
    }
    let validateIdcard = (rule, value, callback) => {
      if (!checkCardId(value)) {
        callback(new Error('法人身份证号格式错误'));
      } else {
        callback();
      }
    }
    return {
      isEdit: false,
      tableData: [],
      viewForm: {},
      rules: {
        shopname: [
          { required: true, message: '店铺名称不能为空', trigger: 'change' }
        ],
        account: [
          { required: true, message: '请选择账户类型', trigger: 'change' }
        ],
        account_type: [
          { required: true, message: '请选择是否开启风控', trigger: 'change' }
        ],
        faptype: [
          { required: true, message: '请选择发票类型', trigger: 'change' }
        ],
        shopcity: [
          { required: true, message: '当前经营位置不能为空', trigger: 'change' }
        ],
        people: [
          { required: true, message: '店铺联系人不能为空', trigger: 'change' }
        ],
        contact_tel: [
          { required: true, message: '联系人手机号不能为空', trigger: 'change' },
          { validator: validateTel, trigger: 'change' }
        ],
        mechanism: [
          { required: true, message: '公司名称不能为空', trigger: 'change' }
        ],
        companyid: [
          { required: true, message: '工商注册号不能为空', trigger: 'change' },
          { validator: validateCompanyId, trigger: 'change' }
        ],
        company_area: [
          { required: true, message: '请选择公司所在区域', trigger: 'change' }
        ],
        company: [
          { required: true, message: '公司地址不能为空', trigger: 'change' }
        ],
        faname: [
          { required: true, message: '法人姓名不能为空', trigger: 'change' }
        ],
        idcard: [
          { required: true, message: '法人身份证号不能为空', trigger: 'change' },
          { validator: validateIdcard, trigger: 'change' }
        ],
        shopcard: [
          { required: true, message: '请上传营业执照', trigger: 'change' }
        ],
        photo: [
          { required: true, message: '请上传店铺头像', trigger: 'change' }
        ],
        doorphoto: [
          { required: true, message: '请上传公司门头照', trigger: 'change' }
        ],
        seal_url: [
          { required: true, message: '请上传公章图片', trigger: 'change' }
        ],
        faidcard: [
          { required: true, message: '请上传身份证正面照', trigger: 'change' }
        ],
        faidcard_back: [
          { required: true, message: '请上传身份证背面照', trigger: 'change' }
        ],
        company_area: [
          { required: true, message: '请选择公司所在区域', trigger: 'change' }
        ]
      },
      optionProps: {
        value: 'name',
        label: 'name',
        expandTrigger: 'hover',
        children: 'sub'
      },
      regionList: [],
      areaList: [],
      shopcity: '',
      companyArea: ''
    }
  },
  methods: {
    getAreaId(arr) {
      for (let p of this.areaList) {
        if (p.name == arr[0]) {
          for (let c of p.sub) {
            if (c.name == arr[1]) {
              return c.id;
            }
          }
        }
      }
      return '';
    },
    accountTypeChange(val) {
      if (val == 1) {
        this.viewForm.account_type = 1;
      }
    },
    setUrl(key, value) {
      this.viewForm[key] = value;
    },
    // 取消更改 
    cancelEdit() {
      if (this.toEdit) {
        this.$router.back()
      } else {
        this.isEdit = false;
        this.getData();
      }
    },
    // 保存提交
    submit() {
      this.$refs['viewForm'].validate((valid) => {
        if (valid) {
          let params = {
            photo: "",
            shopname: "",
            account: null,
            account_type: null,
            faptype: "",
            shopcity: "",
            people: "",
            contact_tel: "",
            mechanism: "",
            companyid: "",
            company_area: "",
            company: "",
            faname: "",
            idcard: "",
            shopcard: "",
            doorphoto: "",
            seal_url: "",
            faidcard: "",
            area_id: "",
            faidcard_back: ""
          }
          for (let key in params) {
            params[key] = this.viewForm[key];
          }
          params.id = this.viewId;
          params.area_id = this.getAreaId(params.company_area);
          params.company_area = params.company_area.join('-');
          params.shopcity = params.shopcity.join('-');
          editShopUserById(params).then(res => {
            this.$router.push({ name: 'auditSupplierView', params: { viewId: this.viewId } });
            this.getData();
          })
        } else {
          this.$message({
            message: "请检查表单错误",
            type: "error"
          });
          return false;
        }
      });
    },
    getData() {
      shopUserById(this.viewId).then(res => {
        this.viewForm = { ...res.shopInfo, ...res.companyInfo };
        this.tableData = res.operationRecord;
        this.shopcity = this.viewForm.shopcity;
        const cityArr = this.viewForm.shopcity.split('-');
        this.viewForm.shopcity = cityArr;
        this.companyArea = this.viewForm.company_area;
        const areaArr = this.viewForm.company_area.split('-');
        this.viewForm.company_area = areaArr;
      })
    },
    getProvice() {
      getRegion().then(res => {
        this.regionList = res ? res[0].sub : [];
        this.areaList = res ? [...res[0].sub] : [];
        const index = this.areaList.findIndex(k => k.id == 7459);
        this.areaList.splice(index, 1);
      })
    }
  },
  mounted() {
    this.isEdit = !!this.toEdit;
    this.getData();
    this.getProvice();
  }
}
</script>

<style lang="scss" scoped>
.supplier_view {
  .info_list {
    padding: 20px 0;
  }
  .el-image {
    width: 95px;
    height: 95px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  label {
    width: 200px;
    margin-right: 10px;
  }
}
.item_inline_form {
  display: inline-block;
  margin-left: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  margin-bottom: 10px;
  & > span {
    display: inline-block;
    height: 100%;
    background-color: $gray-bg;
    padding: 0 10px;
    border-right: 1px solid #e6e6e6;
  }
  /deep/.el-input__inner {
    border: none;
  }
}
.tip {
  color: #bbbbbb;
  padding-left: 210px;
}
.edit_form label {
  padding-top: 12px;
}
.required-icon {
  margin-right: 2px;
}
</style>
<style lang="scss">
.guarantee_item,
.area_item {
  .el-select .el-input {
    width: 100%;
  }
}
.area_item .el-form-item {
  margin-bottom: 10px;
}
</style>
